<%
/**
 * Button 组件 - 通用按钮组件
 * @param {String} type - button类型，默认为 'button' (button|submit|reset)
 * @param {String} variant - 按钮样式变体，默认为 'primary' (primary|secondary|outline|danger|success|warning|ghost)
 * @param {String} size - 按钮尺寸，默认为 'md' (sm|md|lg|xl)
 * @param {String} text - 按钮文本
 * @param {String} icon - 图标类名，可选 (如: 'fas fa-save')
 * @param {String} iconPosition - 图标位置，默认为 'left' (left|right)
 * @param {Boolean} disabled - 是否禁用，默认false
 * @param {Boolean} loading - 是否显示加载状态，默认false
 * @param {String} className - 额外的CSS类，可选
 * @param {String} id - button的id，可选
 * @param {String} onclick - 点击事件，可选
 * @param {String} name - button的name属性，可选
 * @param {String} value - button的value属性，可选
 * @param {String} href - 链接地址，设置后会渲染为 <a> 标签，可选
 * @param {String} target - a标签的target属性，默认为 '_self' (_self|_blank|_parent|_top)
 * @param {String} rel - a标签的rel属性，可选
 */

const buttonType = typeof type !== 'undefined' ? type : 'button';
const buttonVariant = typeof variant !== 'undefined' ? variant : 'primary';
const buttonSize = typeof size !== 'undefined' ? size : 'md';
const buttonText = typeof text !== 'undefined' ? text : '按钮';
const buttonIcon = typeof icon !== 'undefined' ? icon : '';
const iconPos = typeof iconPosition !== 'undefined' ? iconPosition : 'left';
const isDisabled = typeof disabled !== 'undefined' ? disabled : false;
const isLoading = typeof loading !== 'undefined' ? loading : false;
const extraClass = typeof className !== 'undefined' ? className : '';
const iconExtraClass = typeof iconClass !== 'undefined' ? iconClass : '';
const buttonId = typeof id !== 'undefined' ? id : '';
const clickHandler = typeof onclick !== 'undefined' ? onclick : '';
const buttonName = typeof name !== 'undefined' ? name : '';
const buttonValue = typeof value !== 'undefined' ? value : '';
const buttonHref = typeof href !== 'undefined' ? href : '';
const linkTarget = typeof target !== 'undefined' ? target : '_self';
const linkRel = typeof rel !== 'undefined' ? rel : '';

// 样式变体配置
const variantClasses = {
    primary: 'bg-blue-600 hover:bg-blue-700 text-white border-blue-600 hover:border-blue-700',
    secondary: 'bg-gray-600 hover:bg-gray-700 text-white border-gray-600 hover:border-gray-700',
    outline: 'bg-transparent hover:bg-blue-50 text-blue-600 border-blue-600 hover:border-blue-700',
    danger: 'bg-red-600 hover:bg-red-700 text-white border-red-600 hover:border-red-700',
    success: 'bg-green-600 hover:bg-green-700 text-white border-green-600 hover:border-green-700',
    warning: 'bg-yellow-600 hover:bg-yellow-700 text-white border-yellow-600 hover:border-yellow-700',
    ghost: 'bg-transparent hover:bg-gray-50 text-gray-600 border-transparent hover:text-gray-900'
};

// 尺寸配置
const sizeClasses = {
    sm: 'px-3 py-2 text-sm',
    md: 'px-4 py-3 text-sm',
    lg: 'px-6 py-3 text-base',
    xl: 'px-8 py-4 text-lg'
};

// 获取对应的样式类
const currentVariant = variantClasses[buttonVariant] || variantClasses.primary;
const currentSize = sizeClasses[buttonSize] || sizeClasses.md;

// 禁用状态样式
const disabledClass = (isDisabled || isLoading) ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';

// 基础样式类
const baseClasses = 'inline-flex items-center justify-center border font-medium rounded-lg transition-all duration-200 whitespace-nowrap';

// 组合所有样式类
const allClasses = `${baseClasses} ${currentVariant} ${currentSize} ${disabledClass} ${extraClass}`.trim();
%>

<% if (buttonHref) { %>
    <!-- 链接形式的按钮 -->
    <a href="<%= buttonHref %>"
       <% if (buttonId) { %>id="<%= buttonId %>"<% } %>
       target="<%= linkTarget %>"
       <% if (linkRel) { %>rel="<%= linkRel %>"<% } else if (linkTarget === '_blank') { %>rel="noopener noreferrer"<% } %>
       <% if (isDisabled || isLoading) { %>aria-disabled="true" style="pointer-events: none;"<% } %>
       class="<%= allClasses %>">

        <% if (isLoading) { %>
            <!-- 加载状态 -->
            <i class="fas fa-spinner fa-spin mr-2"></i>
            <span>加载</span>
        <% } else { %>
            <!-- 正常状态 -->
            <% if (buttonIcon && iconPos === 'left') { %>
                <i class="<%= buttonIcon %> <%= iconExtraClass %> mr-2"></i>
            <% } %>

            <span><%= buttonText %></span>

            <% if (buttonIcon && iconPos === 'right') { %>
                <i class="<%= buttonIcon %> <%= iconExtraClass %> ml-2"></i>
            <% } %>
        <% } %>
    </a>
<% } else { %>
    <!-- 普通按钮 -->
    <button type="<%= buttonType %>"
            <% if (buttonId) { %>id="<%= buttonId %>"<% } %>
            <% if (buttonName) { %>name="<%= buttonName %>"<% } %>
            <% if (buttonValue) { %>value="<%= buttonValue %>"<% } %>
            <% if (clickHandler) { %>onclick="<%= clickHandler %>"<% } %>
            <% if (isDisabled || isLoading) { %>disabled<% } %>
            class="<%= allClasses %>">

        <% if (isLoading) { %>
            <!-- 加载状态 -->
            <i class="fas fa-spinner fa-spin mr-2"></i>
            <span>加载</span>
        <% } else { %>
            <!-- 正常状态 -->
            <% if (buttonIcon && iconPos === 'left') { %>
                <i class="<%= buttonIcon %> <%= iconExtraClass %> mr-2"></i>
            <% } %>

            <span><%= buttonText %></span>

            <% if (buttonIcon && iconPos === 'right') { %>
                <i class="<%= buttonIcon %> <%= iconExtraClass %> ml-2"></i>
            <% } %>
        <% } %>
    </button>
<% } %>